<template>
  <div class="login-page">
    <div class="l-container">
       <div class="title">登录</div>
      <form @submit.prevent="register">
        <input type="text" class="username" v-model="username" placeholder="请输入你的用户名">
        <div class="error">{{ errorMessage }}</div>
        <input type="password" class="password" v-model="password" placeholder="请输入你的密码">
        <div class="error">{{ errorMessage }}</div>
        <button @click="login" class="login-btn">登录</button>
        <div class="box">
                      <el-checkbox v-model="checked1" label="7天内自动登录" size="large" />
                      <div class="text-link"><RouterLink to="/forget">忘记密码</RouterLink></div>
                   </div>
      </form>
    </div>
  </div>
</template>


<script>
const checked1 = ref(true);
import { defineComponent, ref } from 'vue';
import { useUserStore } from '../stores/userStore'; // 导入你的store
import router from "../router"; // 导入路由器

export default defineComponent({
  name: 'LoginComponent',
  setup() {
    const username = ref('');
    const password = ref('');
    const errorMessage = ref('');
    const userStore = useUserStore(); // 使用store

    const validCredentials = ref(true); // 用于检查凭证是否有效

    const login = () => {
      errorMessage.value = ''; // 重置错误信息
      validCredentials.value = username.value.trim() !== '' && password.value.trim() !== '';
      if (!validCredentials.value) {
        errorMessage.value = '用户名和密码不能为空';
        return;
      }

      userStore.login(username.value, password.value) // 使用store的login方法
        // .then(() => {
        //   // 登录成功后的处理逻辑
        //   alert('登录成功！');
        //   // router.push('/home'); 
        // })
        // .catch((error) => {
        //   // 登录失败后的处理逻辑
        //   errorMessage.value = error;
        // });
    };

    return {
      username,
      password,
      errorMessage,
      login
    };
  }
});
</script>

<style>
.title{
padding: 30px;
font-size: 32px;
}
.login-page{
text-align: center;
position: absolute;
top: 15%;
left: 38%;
}
.l-container {
height: 500px;
width: 400px;
padding: 20px;
background-image: linear-gradient(to right, #f56ca5, #6ec4ec);
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 添加阴影以增强视觉效果 */
}
.login-btn{
    width: 100%;
    padding: 10px 20px;
    background-image: linear-gradient(to right, #6ec4ec, #f56ca5);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }  
  input[type="text"],
  input[type="password"],
  select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 30px;
  }
  .box {
    margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text-link{
a{
  color: #000;
}
}
</style>